<template>
    <div>
        <a-button @click="visible = true" type="primary">选择</a-button>
        <a-modal :open="visible" title="选择坐标点" :destroyOnClose="true" :width="1000" @ok="handleOk"
            @cancel="handleClose">

            <div v-if="lnglat" class="point-div">已选择坐标，
                经度：<span class="point-text">{{ lnglat.lng }}</span>；
                纬度：<span class="point-text">{{ lnglat.lat }}</span>；
            </div>

            <Amap ref="amap" @click="handleClick" style="height: 500px;"></Amap>
        </a-modal>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import Amap from '@/components/Amap/Amap.vue'
import location from '@/assets/map/location.png'
import {Form} from "ant-design-vue";
const formItemContext = Form.useInjectFormItemContext();
const lng = defineModel('lng')
const lat = defineModel('lat')
const visible = ref(false)
const emit = defineEmits(['ok', 'close'])
const lnglat = ref()
const amap = ref()



const handleClick = (e) => {
    console.log(e)
    lnglat.value = e.lnglat
    amap.value.clearMap()
    amap.value.addMarker({
        img: location,
        width: 23,
        height: 31,
        lng: e.lnglat.lng,
        lat: e.lnglat.lat,
        anchor: 'bottom-center'
    })
}

const handleOk = () => {
    emit('ok', lnglat.value)
    lng.value = lnglat.value.lng
    lat.value = lnglat.value.lat
    formItemContext.onFieldChange()
    handleClose()

}
const handleClose = () => {
    lnglat.value = null
    visible.value = false
}
</script>
<style scoped>
.point-div {
    padding: 0 0 30px 0;
}

.point-text {
    color: #1677ff;
}
</style>